<script setup>
import { usePlayerStore, useToolStore } from '@/stores'
import { onMounted, onUnmounted, ref } from 'vue'
import { toTree } from '@/airCityApi/layerTree'
import { requireImg, throttle } from '@/utils/common'
const playerStore = usePlayerStore()
const toolStore = useToolStore()
const isHideFlag = ref(false)
const weatherTypeName = ref('')
const periodOfTime = ref('')
const shuaxin = async () => {
  const res = await __g.infoTree.get()
  playerStore.TreeInfo = res.infotree
  toolStore.InfoTree = toTree(res.infotree)
}
//初始化天气
const weatherInit = () => {
  // 禁用雨雪效果;
  __g.weather.disableRainSnow()
  //设置为白天
  __g.weather.setDateTime(2022, 4, 2, 10, 0, false)
  //设置雾
  __g.weather.setFogParam(0, 0, 0, 1)
  __g.weather.setCloudDensity(0.4)
  __g.weather.setCloudHeight(15)
  __g.weather.setCloudThickness(2)
  //重置日照
  __g.weather.setSunIntensity(0.8)
  //重置环境光
  __g.weather.setAmbientLightIntensity(0.6)
}
const HuanjingId = ref()
const isDark = ref(false)
const isShowMap = ref(false)
const currentTime = ref(43200)

//滑动条的执行函数
const sliderFormat = (val) => {
  //   let result = (val / 60 / 60).toFixed(2).split('.')
  //   let hour = result[0]
  //   let minutes = (~~(Number('0.' + result[1]) * 60)).toString().padStart(2, '0')
  //   __g.weather.setDateTime(year, month, day, Number(hour), Number(minutes), false)
  //   return hour + ':' + minutes
}

const changeTime = async () => {
  let { hour, minute } = await __g.weather.getDateTime()
  let num = Number(hour) * 60 * 60 + Number(minute) * 60

  currentTime.value = num
}

/**
 * 开启/关闭黑暗模式
 * @param val
 */
const changeDarkMode = (val) => {
  __g.weather.setDarkMode(val)
}
/**
 * 开启/关闭电子地图
 * @param val
 */
const changeShowMap = (val) => {
  __g.settings.setMainUIVisibility(val)
}

//天气类型
const WeatherType = ref([
  {
    name: '晴天',
    icon: requireImg('tool/晴天.png')
  },
  {
    name: '多云',
    icon: requireImg('tool/阴天.png')
  },
  {
    name: '小雨',
    icon: requireImg('tool/小雨.png')
  },
  {
    name: '小雪',
    icon: requireImg('tool/小雪.png')
  },
  {
    name: '晴转多云',
    icon: requireImg('tool/晴转多云.png')
  },
  {
    name: '阴',
    icon: requireImg('tool/阴天.png')
  },
  {
    name: '中雨',
    icon: requireImg('tool/中雨.png')
  },
  {
    name: '中雪',
    icon: requireImg('tool/中雪.png')
  },
  {
    name: '小雪转晴',
    icon: requireImg('tool/小雪转晴.png')
  },
  {
    name: '小雨转晴',
    icon: requireImg('tool/小雨转晴.png')
  },
  {
    name: '大雨',
    icon: requireImg('tool/大雨.png')
  },
  {
    name: '大雪',
    icon: requireImg('tool/大雪.png')
  },
  {
    name: '雾',
    icon: requireImg('tool/雾.png')
  },
  {
    name: '霾',
    icon: requireImg('tool/雾霾.png')
  },
  {
    name: '暴雨',
    icon: requireImg('tool/暴雨.png')
  },
  {
    name: '暴雪',
    icon: requireImg('tool/暴雪.png')
  }
])
//天气的点击事件
const WeatherClick = (val) => {
  weatherTypeName.value = val.name;
  periodOfTime.value = "";
  switch (val.name) {
    case '晴天':
      weatherInit()
      __g.weather.setSunIntensity(5)
      __g.weather.setCloudDensity(0.3)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(0.1)

      break
    case '多云':
      weatherInit()
      __g.weather.setCloudDensity(0.6)
      __g.weather.setCloudHeight(1)
      __g.weather.setCloudThickness(0.5)
      __g.weather.setSunIntensity(3)

      break

    case '小雨':
      //初始化
      weatherInit()
      //设置云层
      __g.weather.setCloudDensity(0.6)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(2)

      //设置完云层厚度后才能开启雨效
      __g.weather.setRainParam(0.1, 0.2, 0.06)

      break
    case '中雨':
      //初始化
      weatherInit()
      //设置云层厚度
      __g.weather.setCloudDensity(0.6)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(2)

      //设置完云层厚度后才能开启雨效
      __g.weather.setRainParam(0.3, 0.35, 0.12)

      break
    case '大雨':
      //初始化
      weatherInit()
      //设置云层厚度
      __g.weather.setCloudDensity(0.6)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(2)

      //设置完云层厚度后才能开启雨效
      __g.weather.setRainParam(0.5, 0.5, 0.3)
      break
    case '暴雨':
      //初始化
      weatherInit()
      __g.weather.setCloudDensity(0.6)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(2)

      //设置完云层厚度后才能开启雨效
      __g.weather.setRainParam(0.7, 0.65, 0.45)

      break

    case '小雪':
      //初始化
      weatherInit()

      //设置完云层厚度后才能开启雪效
      __g.weather.setSnowParam(0.15, 0.05, 0.5)

      break
    case '中雪':
      //初始化
      weatherInit()
      __g.weather.setCloudDensity(0.6)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(2)

      //设置完云层厚度后才能开启雪效
      __g.weather.setSnowParam(0.3, 0.1, 0.75)

      break
    case '大雪':
      //初始化
      weatherInit()

      //设置完云层厚度后才能开启雪效
      __g.weather.setSnowParam(0.5, 0.15, 1)

      break
    case '暴雪':
      //初始化
      weatherInit()

      //设置完云层厚度后才能开启雪效
      __g.weather.setSnowParam(1, 0.2, 1.5)

      break

    case '晴转多云':
      //初始化
      weatherInit()
      //先设置日照光 (0-10)
      __g.weather.setSunIntensity(0.3)
      __g.weather.setSunIntensity(5)
      __g.weather.setCloudDensity(0.3)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(1)
      //__g.weather.setAmbientLightIntensity(6)
      //延迟1.5秒转多云设置云层厚度 后减小光照
      setTimeout(() => {
        //厚度
        __g.weather.setCloudThickness(3)
        //密度
        __g.weather.setCloudDensity(2)
        //高度
        __g.weather.setCloudHeight(10)
        //降低日照
        __g.weather.setSunIntensity(3)
      }, 3000)
      break
    case '阴':
      //初始化
      weatherInit()
      //  设置云层密度
      __g.weather.setCloudDensity(0.65)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(5)
      //  云层高度单位：公里

      //
      __g.weather.setSunIntensity(3)
      __g.weather.setAmbientLightIntensity(0.25)
      break

    case '小雨转晴':
      //初始化
      weatherInit()
      //雨
      __g.weather.setRainParam(0.1, 0.2, 0.06)

      setTimeout(() => {
        weatherInit()
        __g.weather.setSunIntensity(5)
        __g.weather.setCloudDensity(0.3)
        __g.weather.setCloudHeight(15)
        __g.weather.setCloudThickness(0.1)
      }, 3000)

      /*  __g.weather.setTemperature(5000)
             __g.weather.setFogParam(0.1, 0.05, 0.4, 2) */
      break
    case '雾':
      //初始化
      weatherInit()
      //设置雾的参数
      __g.weather.setFogParam(0.1, 0.02, 0.4, 1)
      //设置日照
      //__g.weather.setSunIntensity(0.2)
      break
    case '霾':
      //初始化
      weatherInit()
      //设置云层厚度
      __g.weather.setCloudDensity(1)
      //设置雾的参数
      __g.weather.setFogParam(1, 0.04, 0.5, 1)
      //设置色温值
      // __g.weather.setTemperature(1700)
      break
    case '小雪转晴':
      //初始化
      weatherInit()
      __g.weather.setSnowParam(0.15, 0.05, 0.5)

      setTimeout(() => {
        weatherInit()
        __g.weather.setSunIntensity(5)
        __g.weather.setCloudDensity(0.3)
        __g.weather.setCloudHeight(15)
        __g.weather.setCloudThickness(0.1)
      }, 3000)

      break

    default:
      break
  }
}
//时间的类型
const TimeType = ref([
  {
    name: '早晨',
    icon: requireImg('tool/早晨.png')
  },
  {
    name: '中午',
    icon: requireImg('tool/中午.png')
  },
  {
    name: '傍晚',
    icon: requireImg('tool/傍晚.png')
  },
  {
    name: '夜晚',
    icon: requireImg('tool/夜晚.png')
  }
])
//时间的点击事件
const TimeTypeClick = (val, isChange = true) => {
  periodOfTime.value = val.name;
  weatherTypeName.value = "";
  switch (val.name) {
    case '早晨':
      //初始化
      weatherInit()
      __g.weather.setDateTime(2022, 4, 2, 8, 0, false)
      isChange && changeTime()

      break
    case '中午':
      //初始化
      weatherInit()
      __g.weather.setSunIntensity(5)
      __g.weather.setCloudDensity(0.3)
      __g.weather.setCloudHeight(15)
      __g.weather.setCloudThickness(0.1)
      __g.weather.setDateTime(2022, 4, 2, 12, 30, false)
      isChange && changeTime()
      break
    case '傍晚':
      //初始化
      weatherInit()

      __g.weather.setDateTime(2022, 4, 2, 17, 30, false)
      isChange && changeTime()
      break
    case '夜晚':
      //初始化
      weatherInit()
      __g.weather.setDateTime(2022, 4, 2, 20, 30, false)
      isChange && changeTime()
      break
    default:
      break
  }
}

// 时间滑块控制天气
const sliderChange = (val) => {
  let obj = {
    name: '早晨'
  }
  if (val < 28000) {
    obj.name = '早晨'
  } else if (val < 43272 && val > 28000) {
    obj.name = '中午'
  } else if (val < 68848 && val > 43272) {
    obj.name = '傍晚'
  } else if (val > 68848) {
    obj.name = '夜晚'
  }
  TimeTypeClick(obj, false)
}

onMounted(async () => {
  playerStore.$state.TreeInfo.forEach((item) => {
    if (item.name === '环境') {
      HuanjingId.value = item.iD
    }
  })
})
onUnmounted(() => {
  isHideFlag.value = false
  // 刷新图层树仓库
  shuaxin()
})
</script>
<template>
  <div class="weather">
    <a-divider orientation="left" style="border-color: #ddd; color: #fff" dashed> 天气</a-divider>
    <div class="weathertype">
      <div
        @click="WeatherClick(item)"
        :class="[item.name === weatherTypeName ? 'active' : 'type']"
        v-for="item in WeatherType"
        :key="item.name"
      >
        <img :src="item.icon" alt="" />
        {{ item.name }}
      </div>
    </div>
    <a-divider orientation="left" style="border-color: #ddd; color: #fff" dashed>时间</a-divider>
    <!-- 时间滑块 -->
    <div class="slider__content">
      <div class="slider--time">{{ sliderFormat(currentTime) }}</div>
      <el-slider
        @change="sliderChange"
        v-model="currentTime"
        :max="86380"
        :min="1"
        :show-tooltip="false"
        class="elSlider"
      />
    </div>
    <!--  -->
    <div class="TimeType">
      <div
        :class="[periodOfTime === item.name ? 'active' : 'type']"
        @click="TimeTypeClick(item)"
        v-for="item in TimeType"
        :key="item.name"
      >
        <img :src="item.icon" alt="" />
        {{ item.name }}
      </div>
    </div>

    <!--  -->
    <div class="open-dark">
      <div class="dark-item">
        <span>黑暗模式:</span>
        <el-switch
          v-model="isDark"
          @change="changeDarkMode"
          class="ml-2"
          style="--el-switch-on-color: #0c0c0c; --el-switch-off-color: #ccc"
        />
      </div>
      <div class="dark-item">
        <span>UI显隐:</span>
        <el-switch
          v-model="isShowMap"
          @change="changeShowMap"
          class="ml-2"
          style="--el-switch-on-color: #0c0c0c; --el-switch-off-color: #ccc"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.weather {
  position: absolute;
  width: 300px;
  height: 560px;
  top: 130px;
  right: 200px;
  padding: 20px;
  border-radius: 10px;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  background: rgb(28, 39, 52);

  .tip {
    font-size: 12px;

    .colsehuanjing {
      padding: 4px 2px 5px 2px;

      cursor: pointer;

      &:hover {
        color: aqua;
      }
    }
  }

  .weathertype {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;

    .type {
      width: 24%;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 15px;

      cursor: pointer;

      img {
        margin-bottom: 7px;
        width: 20px;
      }

      &:hover {
        background: rgba(0, 0, 0, 0.24);
      }
    }
    .active {
      width: 24%;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 15px;
      background: rgba(0, 0, 0, 0.24);
      cursor: pointer;

      img {
        margin-bottom: 7px;
        width: 20px;
      }
    }
  }

  .TimeType {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;

    .type {
      //@include Width(50);
      width: 24%;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 15px;

      cursor: pointer;

      img {
        margin-bottom: 7px;
        width: 20px;
      }

      &:hover {
        background: rgba(0, 0, 0, 0.24);
      }
    }
    .active {
      // @include Width(50);
      width: 24%;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 15px;
      background: rgba(0, 0, 0, 0.24);
      cursor: pointer;

      img {
        margin-bottom: 7px;
        width: 20px;
      }
    }
  }

  .slider__content {
    display: flex;
    align-items: center;
    padding: 0 25px;

    .slider--time {
      color: #fff;
      width: 40px;
      font-size: 14px;
    }

    .elSlider {
      width: 300px;
      margin-left: 10px;
      border-radius: 50%;

      :deep() {
        .el-slider__bar {
          animation: liuguang 2s infinite linear;
        }
        .el-slider__runway {
          background-color: transparent;
        }
        .el-slider__button {
          width: 15px;
          height: 15px;
          margin-left: 8px;
          border-color: rgb(102, 221, 255);
          background: radial-gradient(rgba(102, 221, 255, 0.9), rgba(0, 0, 0, 0.8));
        }
      }
    }
  }

  .open-dark {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;

    .dark-item {
      display: flex;
      align-items: center;

      span {
        margin-right: 10px;
      }
    }
  }
}
</style>
